<template>
  <q-form @submit="submit" class="q-gutter-md dialog-content" ref="myForm" style="height: 567px">
    <div style="height: 515px">
      <q-separator />
      <div class="gateway-container">
        <div class="left">
          <div class="title">
            LAN1配置
          </div>
          <div style="padding-left: 46px">
            <div>
              <div style="display: flex;align-items: center">
                <label class="text-right name mode-type bold">分配模式:</label>
                <div style="margin-bottom: 20px">
                  <CustomizedSwitch :disabled="wanType === 'lan'" style="width: 110px" :options="modeOption" v-model="formData.dhcp"/>
                </div>
              </div>

              <q-input style="width: 266px" v-model.trim="formData.ipaddr" outlined dense :disable="formData.dhcp === 1 || wanType === 'lan'"
                       :rules="[val => formData.dhcp === 1 || (val && val.length > 0) || '请填写ip地址',
                       val => formData.dhcp === 1 || (val && /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(val)) || '请输入合法ip地址']">
                <template v-slot:before>
                  <label class="text-right name label-width bold"><span class="text-red" v-if="formData.dhcp !== 1">*</span>IP地址:</label>
                </template>
              </q-input>

              <q-input style="width: 266px" v-model.trim="formData.netmask" outlined dense :disable="formData.dhcp === 1 || wanType === 'lan'"
                       :rules="[val => formData.dhcp === 1 || (val && val.length > 0) || '请填写子网掩码',
                       val => formData.dhcp === 1 || (val && /^(?:\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(?:\.(?:\d{1,2}|1\d\d|2[0-4]\d|25[0-5])){3}$/.test(val)) || '请输入合法子网掩码']">
                <template v-slot:before>
                  <label class="text-right name bold"><span class="text-red" v-if="formData.dhcp !== 1">*</span>子网掩码:</label>
                </template>
              </q-input>

              <q-input style="width: 266px" v-model.trim="formData.gateway" outlined dense :disable="formData.dhcp === 1 || wanType === 'lan'"
                       :rules="[val => formData.dhcp === 1 || (val && val.length > 0) || '请填写网关地址',
                       val => formData.dhcp === 1 || (val && /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(val)) || '请输入合法ip地址']">
                <template v-slot:before>
                  <label class="text-right name bold"><span class="text-red" v-if="formData.dhcp !== 1">*</span>网关地址:</label>
                </template>
              </q-input>

              <div class="title">网卡速率</div>

              <q-select
                style="width: 266px"
                outlined
                dense
                emit-value
                map-options
                options-dense
                :disable="wanType === 'lan'"
                :rules="[ val => val !== '' || ' 请选择网卡速率']"
                :options="speedOptions"
                v-model="formData.speed">
                <template v-slot:no-option>
                  <div class="no-option" />
                </template>
                <template v-slot:before>
                  <label class="text-right name bold"><span class="text-red">*</span>网速模式:</label>
                </template>
              </q-select>
            </div>
          </div>
        </div>
        <div class="left">
          <div class="title">
            LAN2配置
          </div>
          <div style="padding-left: 46px">
            <div>
              <div style="display: flex;align-items: center">
                <label class="text-right name mode-type bold">分配模式:</label>
                <div style="margin-bottom: 20px">
                  <CustomizedSwitch style="width: 110px" :options="modeOption" v-model="formData2.dhcp"/>
                </div>
              </div>

              <q-input style="width: 266px" v-model.trim="formData2.ipaddr" outlined dense :disable="formData2.dhcp === 1"
                       :rules="[val => formData2.dhcp === 1 || (val && val.length > 0) || '请填写ip地址',
                       val => formData2.dhcp === 1 || (val && /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(val)) || '请输入合法ip地址']">
                <template v-slot:before>
                  <label class="text-right name label-width bold"><span class="text-red" v-if="formData2.dhcp !== 1">*</span>IP地址:</label>
                </template>
              </q-input>

              <q-input style="width: 266px" v-model.trim="formData2.netmask" outlined dense :disable="formData2.dhcp === 1"
                       :rules="[val => formData2.dhcp === 1 || (val && val.length > 0) || '请填写子网掩码',
                       val => formData2.dhcp === 1 || (val && /^(?:\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(?:\.(?:\d{1,2}|1\d\d|2[0-4]\d|25[0-5])){3}$/.test(val)) || '请输入合法子网掩码']">
                <template v-slot:before>
                  <label class="text-right name bold"><span class="text-red" v-if="formData2.dhcp !== 1">*</span>子网掩码:</label>
                </template>
              </q-input>

              <q-input style="width: 266px" v-model.trim="formData2.gateway" outlined dense :disable="formData2.dhcp === 1"
                       :rules="[val => formData2.dhcp === 1 || (val && val.length > 0) || '请填写网关地址',
                       val => formData2.dhcp === 1 || (val && /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(val)) || '请输入合法ip地址']">
                <template v-slot:before>
                  <label class="text-right name bold"><span class="text-red" v-if="formData2.dhcp !== 1">*</span>网关地址:</label>
                </template>
              </q-input>

              <div class="title">网卡速率</div>

              <q-select
                style="width: 266px"
                outlined
                dense
                emit-value
                map-options
                options-dense
                :options="speedOptions"
                :rules="[ val => val !== '' || ' 请选择网卡速率']"
                v-model="formData2.speed">
                <template v-slot:no-option>
                  <div class="no-option" />
                </template>
                <template v-slot:before>
                  <label class="text-right name bold"><span class="text-red">*</span>网速模式:</label>
                </template>
              </q-select>
            </div>
          </div>
        </div>
      </div>
    </div>
    <q-separator />
    <div class="dialog-footer text-center margin-t-10">
      <q-btn outline label="上一步" color="primary" @click="preStep" class="q-mr-md"/>
      <q-btn unelevated label="下一步" color="primary" type="submit" :loading="submitting"/>
    </div>
  </q-form>
</template>

<script>
import CustomizedSwitch from 'src/components/customized-switch'
import _ from 'lodash'
import { deleteBox, getLanQuery, updateLan } from '../../../../../boot/miot/list'

export default {
  name: 'config-gateway',
  components: {
    CustomizedSwitch
  },
  props: {
    boxId: {
      type: String,
      default: ''
    },
    wanType: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      submitting: false,
      // LAN1配置
      formData: {
        dhcp: 1,
        gateway: '',
        ipaddr: '',
        netmask: '',
        speed: ''
      },
      formDataTemp: {},
      // LAN2配置
      formData2: {
        dhcp: 1,
        gateway: '',
        ipaddr: '',
        netmask: '',
        speed: ''
      },
      formData2Temp: {},
      modeOption: [
        {
          value: 1,
          label: 'DHCP'
        },
        {
          value: 0,
          label: '静态'
        }
      ],
      speedOptions: [
        {
          value: 0,
          label: '自动'
        },
        {
          value: 1,
          label: '10M半双工'
        },
        {
          value: 2,
          label: '10M全双工'
        },
        {
          value: 3,
          label: '100M半双工'
        },
        {
          value: 4,
          label: '100M全双工'
        }
      ]
    }
  },
  watch: {
    boxId: {
      immediate: true,
      handler: function (val) {
        if (val) {
          this.getLanQuery()
        }
      }
    },
    'formData.dhcp': {
      handler: function (val, oldVal) {
        // reset表单验证
        this.$refs.myForm.resetValidation()
        // 从静态切换到dhcp，保存一下静态所填写的值
        if (val === 1 && oldVal === 0) {
          this.formDataTemp = _.cloneDeep(this.formData)
        }
        // 如果是静态模式，就把他恢复之前存的值，如果是dchp模式，就置空
        if (val === 0) {
          this.formData.gateway = this.formDataTemp.gateway
          this.formData.ipaddr = this.formDataTemp.ipaddr
          this.formData.netmask = this.formDataTemp.netmask
        } else if (val === 1) {
          this.formData.gateway = ''
          this.formData.ipaddr = ''
          this.formData.netmask = ''
        }
      }
    },
    'formData2.dhcp': {
      handler: function (val, oldVal) {
        this.$refs.myForm.resetValidation()
        // 从静态切换到dhcp，保存一下静态所填写的值
        if (val === 1 && oldVal === 0) {
          this.formData2Temp = _.cloneDeep(this.formData2)
        }
        // 如果是静态模式，就把他恢复之前存的值，如果是dchp模式，就置空
        if (val === 0) {
          this.formData2.gateway = this.formData2Temp.gateway
          this.formData2.ipaddr = this.formData2Temp.ipaddr
          this.formData2.netmask = this.formData2Temp.netmask
        } else if (val === 1) {
          this.formData2.gateway = ''
          this.formData2.ipaddr = ''
          this.formData2.netmask = ''
        }
      }
    }
  },
  methods: {
    async getLanQuery () {
      if (!this.boxId) return

      const { data } = await getLanQuery(this.boxId)
      if (data && data[0]) {
        if (data[0]['lan0']) {
          const form = data[0]['lan0']
          if (form.dhcp === 1) {
            this.formData.dhcp = form.dhcp
            this.formData.speed = form.speed
          } else {
            this.formData = form
          }
          this.formDataTemp = _.cloneDeep(form)
        }
        if (data[0]['lan1']) {
          const form = data[0]['lan1']
          if (form.dhcp === 1) {
            this.formData2.dhcp = form.dhcp
            this.formData2.speed = form.speed
          } else {
            this.formData2 = form
          }
          this.formData2Temp = _.cloneDeep(form)
        }
      }
    },

    async preStep () {
      await this.deleteDataConfirm(this.boxId)
      this.$emit('preStep')
    },

    /**
     * 执行删除操作
     */
    async deleteDataConfirm (boxId) {
      if (!boxId) return
      const data = await deleteBox(boxId)
      if (data.success) {
        this.$emit('deleteSuccess')
      } else {
        this.$message.error('删除失败')
      }
    },

    async submit () {
      this.submitting = true
      const params = {
        lan0: this.formData,
        lan1: this.formData2
      }
      try {
        const data = await updateLan(this.boxId, params)
        if (data.data.result_code === 0) {
          this.$emit('successSubmit')
        } else {
          if (data.data.result_code === -1) {
            this.$message.warning('配置失败')
          }
        }
      } catch (e) {
      } finally {
        this.submitting = false
      }
    }
  }
}
</script>

<style scoped lang="stylus">
.detail-container{
  padding 20px
  font-size 14px
  line-height 1
}
.gateway-container
  padding 19px
  display flex
  .mode-type
    line-height 1
    margin-right 6px
    margin-bottom 20px
  .bold
    font-weight 500
  .left
  .right
    width 50%
    .title
      line-height 1
      font-size 16px
      margin-bottom 20px
      color $primary
</style>
